<template>
  <div>
    <Header/>
    <div class="backred">
      <div class="sidebar">
        <div class="list">
          <div class="shanpi">
            <div class="shanpiimg"><img src="@/assets/img/aa.png" alt=""></div>
            <div class="shanmtxt">
              <h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4>
              <div class="fax anghon">
                <!-- <p>市场指导价：<span>1514</span> 元</p> -->
                <p>活动名额：<span>12</span> 人</p>
              </div>
              <div class="fax anghon1">
                
                <div class="dawfaea">
                  <div><span>新品价格</span><div class="ainput">430</div><span>元</span></div>
                  
                </div>
              </div>
              <!-- <div class="fax aaaa">
                <p>活动已截止，共<span>2635</span> 人参与此次活动</p>
                
              </div> -->
              <div class="aaaa">
                <div>活动已截止，共 <span>3935</span> 人参与此次活动</div>
                <p>中奖结果我们将以系统通知中奖会员，请注意查看系统消息！</p>
              </div>
              <div class="fax coee">
                <div class="div1" @click="tiaoz()">查看其他活动免费体验活动</div>
                <div class="div2">谢谢参与</div>
              </div>
            </div>
          </div>
          <div class="tabe">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="体验须知" name="first">
                <div class="cingcai">竞猜流程</div>
                <div class="lc_c">
                  <div>01<br>进入我要竞猜</div>
                  <div>02<br>查看商品详情</div>
                  <div>03<br>预估商品价格</div>
                  <div>04<br>竞猜中奖</div>
                  <div>05<br>查看获奖详情</div>
                </div>
                <div class="cingcai">申请须知</div>
                <div class="adadw">
                  <ul>
                    <li>1. 免费竞猜，竞猜过程无需支付任何费用</li>
                    <li>2. 中奖产品详见详情页</li>
                    <li>3. 中奖名额抽取以商家最终定价为依据，越接近定价获奖几率越高</li>
                    <li>4. 竞猜中奖名单在活动结束三天内公布，我们将通过系统消息通知到您</li>
                    <li>5. 竞猜中奖后，请主动与商家联系奖品发放情况</li>
                    <li>6. 奖品发放可进入个人中心查看物流情况</li>

                  </ul>
                </div>
              </el-tab-pane>
              <el-tab-pane label="申请名单(4312人)" name="second">
                <div class="list_b">
                  <div class="list_con">
                    <div>
                      <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>weqweqe</p>
                        <p>12312312</p>
                      </div>
                      <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>weqweqe</p>
                        <p>12312312</p>
                      </div>
                    </div>
                    <div>
                      <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>weqweqe</p>
                        <p>12312312</p>
                      </div>
                      <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>weqweqe</p>
                        <p>12312312</p>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="中奖名单(10人)" name="third">
                <div class="list_c">
                  333333
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="conezhan">
            <div class="sango">商品展示</div>
            <div class="sahngimg">
               <img src="@/assets/img/产品详情介绍4.png" alt="">
               <img src="@/assets/img/产品详情介绍5.png" alt="">
               <img src="@/assets/img/产品详情介绍6.png" alt="">
            </div>
          </div>
        </div>
        <Advertisement/>
      </div>
    </div>
    <Footer/>
  </div>
</template>   
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import Advertisement from '@/components/Advertisement'
export default {
  name: 'detail', 
  components: { 
    Header,
    Footer,
    Advertisement
  },
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    tiaoz(){
      this.$router.push('/guessing')
    }
  }
}
</script> 
<style scoped lang="stylus">
.tabe >>>.el-tabs__item.is-active {
  color:#f3806d;
}
.tabe >>>.el-tabs__item:hover{
  color:#f3806d;
}
.tabe >>>.el-tabs__item.is-active{
  color:#f3806d;
}
.tabe >>>.el-tabs__active-bar {
  background-color:#f3806d;
}
.tabe >>>.el-tabs__nav-scroll {
  background-color:#eee;
  margin-left: 10px
}
.backred {
  background-color: #f06048;
  display: flex;
  justify-content: space-between;
}
.sidebar {
  width: 1200px;
  margin: 5px auto;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
}
.list {
  width: 1000px;
}
.shanpi {
  width: 875px;
  height: 300px;
  margin: 25px auto;
  display: flex;
  justify-content: space-between;
}
.tabe {
  width: 895px;
  margin: 0 auto;
}
.conezhan {
  width: 875px;
  margin: 0 auto;
}
.sango {
  line-height: 40px;
  background-color:#eee;
}
.sahngimg {
  width: 875px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom:50px
}
.shanpiimg{
  width:300px;
  height:300px
}
.shanpiimg img{
  width:300px;
  height:300px
}
.shanmtxt {
  width: 570px;
  margin-left:20px

}
.list_b {
  width: 895px;
  height:430px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list_c {
  width: 920px;
  height:430px;
  margin: 0 auto;  
}
.tabe .cingcai {
	width: 136px;
	line-height:36px;
  text-align: center;
	background-color: #f06048;
	border-radius: 4px;
  margin: 0 auto;
  font-size: 24px;
  color: #fff;
}

.tabe .lc_c{
  width: 850px;
	height: 58px;
  display: flex;
  justify-content: space-between;
  margin:30px auto;
}
.lc_c div {
  width: 125px;
	height: 58px;
  line-height:27px
  text-align: center;
	border: dashed 1px #f06048;
  font-family: SourceHanSansCN-Regular;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
}
.adadw ul {
  width:850px;
  margin: 0 auto;
  line-height:29px
}
.adadw li{
  color: #898989;
  font-size: 16px;
}
.adadw li:before {
  width:15px;
  height:15px;
  background-color:#f06048;
  transform:rotate(90deg);
}
.fax {
  display: flex;
  justify-content: space-between;
}
.shanmtxt h4{
  font-size:24px;
  color:#313131;
}
p {
  color:#a0a0a0
}
.shanmtxt .anghon {
  width:300px;
  line-height: 50px;
}
.shanmtxt .anghon span {
  font-size: 24px;
  color: red;
  font-weight: 600
}
.shanmtxt .anghon1 {
    width: 314px;
    height: 100px;
} 
.shanmtxt .aaaa {
  margin-bottom: 10px
}
.shanmtxt .aaaa span {
  font-size: 20px;
  color: #f00;
  font-weight: 600;
}
.coee .div1 {
  width: 453px;
	line-height: 60px;
  height: 60px;
	background-color: #a0a0a0;
  font-size: 18px;
  color: #fff;
  text-align: center;
}
.coee .div1 span {
  font-size: 22px
}
.coee .div2{
  width: 200px;
	line-height: 60px;
  height: 58px;
	border: solid 1px #f06048;
  font-size: 24px;
  color: #f06048;
  text-align: center;
}
.list_con {
  width:840px;
  height:430px;
  display:flex;
  justify-content: space-between;
}
.list_ons {
  display:flex
  margin-bottom 15px
}
.list_ons img {
  width:58px;
  height:58px;
  border-radius: 15px
}
.list_ons p {
  margin-left: 20px;
  line-height: 58px
  font-size: 18px
}
.dawfaea {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left:20px
}
.ainput {
  width: 180px;
	height: 33px;
	border: solid 2px #f06048;
  text-align center
  line-height 33px
  font-size 24px
  color #F00
  display inline-block
}
.dawfaea span {
  font-size: 22px
}
</style>